<template>
	<view :class="[primarySize()]">
		<view class="container bg-white">
			<view class="top_box">
				<view class="teamnum">
					<view class="flex-box">
						<view class="flex-grow-1">
							<view class="fs40">{{total_num}}</view>
							<view class="fs28 mt20">我的团队</view>
						</view>
						<button class="rightnow" @click="onInvite">立即邀请</button>
					</view>
					<view class="flex-box mt30">
						<view class="flex-grow-1">
							<view class="key">直推人数</view>
							<view class="value2">{{first_num}}个</view>
						</view>
						<view class="flex-grow-1">
							<view class="key">间推人数</view>
							<view class="value2">{{second_num}}个</view>
						</view>
						<view class="flex-grow-1">
							<view class="key">潜在人数</view>
							<view class="value2">{{none_num}}个</view>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-box plr40">
				<view class="title flex-grow-1">团队成员</view>
				<view class="commission_tab flex-box flex-between">
					<view class="tab" :class="[tab==1?'active':'']" @click="changetab(1)">直推</view>
					<view class="tab" :class="[tab==0?'active':'']" @click="changetab(0)">间推</view>
				</view>
			</view>
			<view class="memberlist">
				<view class="listitem df ac" v-for="(item,index) in recomList" :key="index">
					<image :src="item.user.avatar" class="avatar" mode="aspectFill"></image>
					<view class="flex1">
						<view class="df ac js">
							<view class="fs30 pb20">{{item.user.nickname}}</view>
							<view class="fs34 colff">¥{{item.to_money}}</view>
						</view>
						<view class="fs24 col89">{{item.bindtime_text}}加入</view>
					</view>
				</view>
				<view class="nothing" v-if="recomListMore.nothing">
					<image src="https://admin.mosizp.cn/static/public/icon_nothing.png" mode="aspectFill"></image>
					<text>抱歉，暂无相关信息</text>
				</view>
				<button @click="fetch" v-else hover-class="none"
					class="more_btn mt30 mb30">{{recomListMore.text}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				
				total_num: 0,
				first_num: 0,
				second_num: 0,
				none_num: 0,
				tab: 1,
				recomList: [],
				recomListMore: {
					page: 1
				},
			}
		},
		onLoad: function(options) {
			;
			this.recomInit();
			this.fetch();
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.primaryColor()
			})
		},
		onReachBottom: function() {
			this.fetch();
		},
		methods: {
			recomInit() {
				let page = this;
				this.$core.get({
					url: '/xilujob.distribution/recom_init',
					loading: false,
					success(ret, data) {
						page.total_num = ret.data.total_num;
						page.first_num = ret.data.first_num;
						page.second_num = ret.data.second_num;
						page.none_num = ret.data.none_num;
					}
				});
			},
			changetab(i) {
				this.tab = i
				this.recomList = []
				this.recomListMore = {
					page: 1
				}
				this.fetch();
			},
			fetch: function() {
				this.$util.fetch(this, '/xilujob.distribution/myteam', {
					tab: this.tab
				}, 'recomListMore', 'recomList', 'data');
			},
			/**
			 * 邀请
			 */
			onInvite() {
				this.$core.get({
					url: 'xilujob.user/poster_info',
					success: ret => {
						this.$core.setCache('temp', ret.data, 10);
						uni.navigateTo({
							url: '/pages/public/share_post1'
						})
					}
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.top_box {
		margin: 30rpx 40rpx 40rpx;
		padding: 30rpx;
		background: var(--primary);
		border-radius: 15rpx;
		position: relative;
	}

	.top_box .fs40 {
		line-height: 44rpx;
	}

	.icon_team {
		width: 670rpx;
		height: 261rpx;
	}

	.teamnum {
		color: #fff;
	}

	.top_box .rightnow {
		width: 200rpx;
		height: 60rpx;
		border-radius: 8rpx;
		background: #ffffff;
		box-shadow: 0rpx 4rpx 30rpx rgba(184, 189, 202, 0.3);
		padding: 0;
		line-height: 60rpx;
		font-weight: normal;
		font-size: 28rpx;
	}

	.top_box .key {
		margin: 0 0 20rpx;
		font-size: 28rpx;
		color: #FFF;
		line-height: 30rpx;
	}

	.top_box .value2 {
		font-size: 34rpx;
		font-weight: bold;
		color: #FFFFFF;
		line-height: 36rpx;
	}


	.title {
		font-size: 34rpx;
	}

	.memberlist {
		padding: 11rpx 40rpx;
	}

	.listitem {
		padding: 30rpx 0;
		border-bottom: 1px solid #f4f3f3;
	}

	.listitem .avatar {
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		margin-right: 30rpx;
	}

	.colff {
		color: #FF3333;
	}


	.commission_tab {
		width: 224rpx;
		height: 52rpx;
		background: #F9F9F9;
		border-radius: 26rpx;
	}

	.commission_tab .tab {
		width: 110rpx;
		height: 48rpx;
		border-radius: 26rpx;
		font-size: 24rpx;
		color: #333333;
		line-height: 48rpx;
		text-align: center;
	}

	.commission_tab .tab.active {
		background: var(--primary);
		color: #FFF;
	}
</style>